<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    .banner{
      background-color: rgb(46,110,194);
      color: rgb(255,255,255);
      width: 600px;
      height: 50px;
      line-height: 600px;
      text-align: center;
      padding: 20px;
      margin: 0 auto;
    }
    span{
      font-feature-settings: 0.6em;
    }
  </style>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
  <!--isShowStyle 动态绑定属性-->
  <!--message 静态绑定属性-->
  <banner-component v-bind:is-style="isShowStyle" message="Happy一下"></banner-component>
</div>
<!--子组件-->
<template id="childComp">
  <span>{{subMessage}}</span>
</template>

<!--父组件-->
<template id="parentComp">
  <div>
    <!--banner：isStyle 动态绑定属性-->
    <h2 :class="{ banner:isStyle}">
      {{message}}
      <!--sub-message（短横线分隔方式命名） 静态绑定属性-->
      <child-component sub-message="不玩就out了"></child-component>
    </h2>
  </div>

</template>

<script>
  var vm=new Vue({
    el:"#app",
    data:{
      isShowStyle:true
    },
    components:{
      "banner-component":{
        props:["message","isStyle"],//props字符串
        template:"#parentComp",//注册父组件
        components:{
          "child-component":{
            props:{//props对象
              subMessage:String//驼峰式命名
            },
            template:"#childComp",//注册子组件
          }
        }
      }
    }
  })
</script>
</body>
</html>
